<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件响应</title>
    <style>
        #div{
            width: 300px;
            height: 300px;
            background-color: aquamarine;
        }
        #div1{
            width: 300px;
            height: 100px;
            background-color:aqua;
        }

    </style>
</head>
<body>
    <div id="div">
        <h3>这是一个鼠标事件演示div</h3>
        <img src="../../Images/image3.png" style="width: 200px;height: 200px;">
    </div>

    <div id="div1">
        <h3>这是一个键盘事件演示div</h3>
        <input id="input"></input>
    </div>


    <script>
        //鼠标事件:
        // （1）点击事件
        //监听方式一
        let div=document.getElementById("div")
        //onclick 表示区域被点击，等于后是一个事件即函数
        div.onclick=()=>{
            console.log("div被点击")
        }

        //监听事件方式二（常用）
        //这是一个函数，前参数是事件名，后一个是事件发生后的事情
        div.addEventListener("click",()=>{
            console.log("div被点击,且被监听")
        })

        div.addEventListener("click",(e)=>{
            console.log("际触发事件的具体元素‌:")
            console.log(e.target)
        })

        //（2）移入、移除、移动事件
        let img=document.getElementsByTagName("img")[0]
        img.addEventListener("mouseenter",()=>{
            console.log("鼠标移入图片")
        })
        img.addEventListener("mouseleave",()=>{
            console.log("鼠标移出图片")
        })
        img.addEventListener("mousemove",()=>{
            console.log("鼠标在图片上移动")
        })

        //键盘事件：
        let input = document.getElementById("input")
        
        input.addEventListener('keydown', (i) => {
        console.log('按键按下:',i.key) //输出按键名
        })

        input.addEventListener('keyup', (i) => {
            console.log('按键释放:',i.key) //输出按键名
        })

        input.addEventListener('keypress', (i) => {
            console.log('字符输入:',i.key) //输出按键名
            console.log('按键代码:',i.code) //输出按键代码
        })
    </script>
</body>
</html>